<template>
    <div id="app">
         <h1 id="namebox" @click="say()">我是根组件---{{myname}}</h1>
       <!-- 3 使用子组件的 单个单词直接使用 如果驼峰可以使用-拆开 -->
        <!-- <cartCom></cartCom> -->
         <!-- <cartCom />   -->
          <!-- 推荐第三种写法 -->
          <cart-com></cart-com>
          <hr>
          <mine-com></mine-com>
    </div>
</template>

<!-- vue的一个组件由三部分构成
  template部分 组件模板部分  标签  template 部分必须有一个根标签div
  script 部分 当前组件的js部分
  style  部分 当前组件的样式部分
-->

<script>
// export default 默认导出组件
// vue 组件 配置成路由使用， 给其他组件当子组件使用

// 1. 导入组件  
import cartCom from './views/cart/index.vue'
import mineCom from './views/my/index.vue'

export default {
  name: 'App',//当前组件的名字 别数字开头
  components:{//2注册子组件的配置项
    // 2子组件的名字：导入的子组件内容
    //  cartCom:cartCom,  //es6简写
    cartCom,
    mineCom
  }, 
  data(){
    return {
      myname:"释永信"
    }
  },
  methods:{
    say(){
      console.log("我是根组件的say方法")
    }
  },
  computed:{},
  watch:{},
  created(){},//创建后
  mounted(){},//挂载后
  directives:{},//局部自定义指令
  filters:{},//局部过滤器
}
</script>
<!--   //   语法：scoped 在style 标签加scoped 代表样式只在当前组件生效 -->
<style lang="scss" scoped>
  #namebox{
    background: blue;
    color:red;
    font-size:30px;
  }
</style>
